<template>
	<view class="page">
		<scroll-view class="backview" bounces="false">
			<lexiconNavVue :title="type" />
			<view class="search-flex" id="searchView">
				<view class="search-area">
					<image class="search-icon" src="../../static/image/homePage/icon-search.png"></image>
					<input class="search-input" placeholder="点击输入要查询的内容" @input="searchValueChange"></input>
					<view class="search-btn" @tap="searchFn">搜索</view>
				</view>
			</view>
			<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
				:scroll-with-animation='true'>
				<z-paging :fixed="false" ref="paging" v-model="taskList" @query="getQueryList"
					style="width: 100%; height: 100%;" :default-page-size="20" :refresher-title-style="refresherStyle"
					:loading-more-title-custom-style="refresherStyle" empty-view-error-text="您所在班级暂未添加试题，请联系老师">

					<view class="room-back">
						<view class="room-item-box" @click="fnEnterRoom(task,taskIndex)"
							:style="{padding:'10px'}"
							v-for="(task,taskIndex) in taskList" :key="taskIndex">
							<view class="room-item">
								<view class="room-title">
									{{task.title}}
								</view>
								<view class="bottom-view">
									<view class="state-img">
										<image v-if="!task.finishStatus && !task.expireStatus"
											style="width: 100%; height: 100%;"
											src="../../static/image/ftalk/state-001.jpg" mode=""></image>
										<image v-if="task.finishStatus && !task.expireStatus"
											style="width: 100%; height: 100%;"
											src="../../static/image/ftalk/state-002.jpg" mode=""></image>
										<image v-if="task.expireStatus" style="width: 100%; height: 100%;"
											src="../../static/image/ftalk/state-003.jpg" mode=""></image>
									</view>
									<view class="right-view">
										<image v-if="task.nearExpire" style="width: 20px;height: 20px;"
											src="../../static/image/ftalk/data-image001.png" mode=""></image>
										<image v-else style="width: 20px;height: 20px;"
											src="../../static/image/ftalk/data-image002.png" mode=""></image>
										<view class="right-date">
											{{task.finishTime}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</scroll-view>
			<popPromptBox v-if="showPromptbox" :msg="PromptMsg" @confirm="hidePromptbox"></popPromptBox>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					pageNum: 1,
					pageSize: 10
				},
				roomBoxHeight: 0,
				inputData: '',
				scrollHeight: 0,
				taskList: [],
				showPromptbox: false,
				type: '',
			}
		},
		onLoad(options) {
			var that = this;
			console.log('options=======', options);
			that.type_id = options.type_id;
			that.grade_id = options.grade_id;
			that.type = options.type;
			that.grade = options.grade;
			that.alias = options.alias;
			that.enTitle = options.en;
			that.flag = options.flag;
		},
		onShow() {
			if (this.$refs.paging) {
				this.$refs.paging.reload();
			}
		},
		onReady() {
			this.calculateScrollViewHeight();
		},
		computed: {
			refresherStyle() {
				return {
					'font-size': '18px'
				}
			}
		},
		mounted() {},
		methods: {
			// 点击事件
			fnEnterRoom(itemData, index) {
				console.log('itemData', itemData);
				if (this.flag == 'stxs') { // 识图叙事
					if (itemData.finishStatus) {
						uni.navigateTo({
							url: `/pages/bmaster/report/report_stxs?questionId=${itemData.id}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/bmaster/oralAssessment_socket?questionId=${itemData.id}`
						})
					}
				} else if (this.flag == 'scfy') { // 识词发音
					if (itemData.finishStatus) {
						uni.navigateTo({
							url: `/pages/bmaster/report/report_scfy?questionId=${itemData.id}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/bmaster/oralAssessment_pronu?questionId=${itemData.id}`
						})
					}
				} else if (this.flag == 'cjpy') { // 场景配音
					if (itemData.finishStatus) {
						console.log('!!!!!2')
						uni.navigateTo({
							url: `/pages/bmaster/report/report_cjpy?questionId=${itemData.id}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/bmaster/oralAssessment_cjpy?questionId=${itemData.id}`
						})
					}
				} else if (this.flag == 'htsk') { // 话题思考
					if (itemData.finishStatus) {
						console.log('!!!!!21')
						uni.navigateTo({
							url: `/pages/bmaster/report/report_htsk?questionId=${itemData.id}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/bmaster/oralAssessment_htsk?questionId=${itemData.id}`
						})
					}
				}else if (this.flag == 'wzyd') { // 文章阅读
					console.log('itemData', itemData);
					uni.showToast({
						title: '敬请期待',
						icon: 'none',
						duration: 2000
					})
					// if (itemData.finishStatus) {
					// 	uni.navigateTo({
					// 		url: `/pages/bmaster/report/report_wzyd?questionId=${itemData.id}`
					// 	})
					// } else {
					// 	uni.navigateTo({
					// 		url: `/pages/bmaster/oralAssessment_wzyd?questionId=${itemData.id}`
					// 	})
					// }
				}
			},
			hidePromptbox() {
				this.showPromptbox = false;
			},
			getQueryList(pageNo, pageSize) {
				this.formData.pageNum = pageNo;
				this.formData.pageSize = pageSize;
				if (this.flag == 'stxs') {
					this.$http.getPczxIconicLiteracy(this.formData).then(res => {
						console.log('res', res)
						if (res.code == 200) {
							var list = res.data.list;
							for (var i = 0; i < list.length; i++) {
								// 处理完成时间
								var finishTime = list[i].finishTime;
								var finishTime_arr = finishTime.split(" ");
								list[i].finishTime = finishTime_arr[0];

								//处理创建时间
								var createTime = list[i].createTime;
								var createTime_arr = createTime.split(":");
								list[i].createTime = createTime_arr[0] + ':' + createTime_arr[1];

								//处理即将过期状态
								if (list[i].finishStatus == true) {
									list[i].nearExpire = false;
								}
							}
							this.$refs.paging.complete(list);
						} else {
							this.$refs.paging.complete(false);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else if (this.flag == 'scfy') {
					this.$http.getPczxRecognitionLiteracy(this.formData).then(res => {
						if (res.code == 200) {
							var list = res.data.list;
							for (var i = 0; i < list.length; i++) {
								// 处理完成时间
								var finishTime = list[i].finishTime;
								var finishTime_arr = finishTime.split(" ");
								list[i].finishTime = finishTime_arr[0];

								//处理创建时间
								var createTime = list[i].createTime;
								var createTime_arr = createTime.split(":");
								list[i].createTime = createTime_arr[0] + ':' + createTime_arr[1];

								//处理即将过期状态
								if (list[i].finishStatus == true) {
									list[i].nearExpire = false;
								}
							}
							this.$refs.paging.complete(list);
						} else {
							this.$refs.paging.complete(false);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else if (this.flag == 'cjpy') {
					this.$http.getPczxDubbing(this.formData).then(res => {
						if (res.code == 200) {
							var list = res.data.list;
							for (var i = 0; i < list.length; i++) {
								// 处理完成时间
								var finishTime = list[i].finishTime;
								var finishTime_arr = finishTime.split(" ");
								list[i].finishTime = finishTime_arr[0];

								//处理创建时间
								var createTime = list[i].createTime;
								var createTime_arr = createTime.split(":");
								list[i].createTime = createTime_arr[0] + ':' + createTime_arr[1];

								//处理即将过期状态
								if (list[i].finishStatus == true) {
									list[i].nearExpire = false;
								}
							}
							this.$refs.paging.complete(list);
						} else {
							this.$refs.paging.complete(false);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else if (this.flag == 'htsk') {
					this.$http.getPczxLecture(this.formData).then(res => {
						if (res.code == 200) {
							var list = res.data.list;
							for (var i = 0; i < list.length; i++) {
								// 处理完成时间
								var finishTime = list[i].finishTime;
								var finishTime_arr = finishTime.split(" ");
								list[i].finishTime = finishTime_arr[0];

								//处理创建时间
								var createTime = list[i].createTime;
								var createTime_arr = createTime.split(":");
								list[i].createTime = createTime_arr[0] + ':' + createTime_arr[1];

								//处理即将过期状态
								if (list[i].finishStatus == true) {
									list[i].nearExpire = false;
								}
							}
							this.$refs.paging.complete(list);
						} else {
							this.$refs.paging.complete(false);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else if (this.flag == 'wzyd') {
					this.$http.getReadList(this.formData).then(res => {
						console.log('res', res);
						if (res.code == 200) {
							var list = res.data.list;
							for (var i = 0; i < list.length; i++) {
								// 处理完成时间
								var finishTime = list[i].finishTime;
								var finishTime_arr = finishTime.split(" ");
								list[i].finishTime = finishTime_arr[0];
					
								//处理创建时间
								var createTime = list[i].createTime;
								var createTime_arr = createTime.split(":");
								list[i].createTime = createTime_arr[0] + ':' + createTime_arr[1];
					
								//处理即将过期状态
								if (list[i].finishStatus == true) {
									list[i].nearExpire = false;
								}
							}
							this.$refs.paging.complete(list);
						} else {
							this.$refs.paging.complete(false);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}

			},
			searchValueChange(inputData) {
				console.log('inputData', inputData);
				this.inputData = inputData.target.value;
			},
			// 搜索按钮点击事件
			searchFn() {
				this.formData.title = this.inputData;
				this.$refs.paging.reload();
			},
			calculateScrollViewHeight() {
				// 获取容器的高度（这里假设你可以直接获取，或者通过其他方式计算得到）  
				const that = this
				uni.createSelectorQuery().select('#searchView').boundingClientRect(rect => {
					// rect 是一个对象，包含了节点的布局位置（相对于小程序页面，以像素为单位）、宽高信息  
					that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - 20;
					that.roomBoxHeight = that.scrollHeight - 80 - 58 - 50;
				}).exec();
			}
		}
	}
</script>

<style lang="less">
	.backview {
		background-image: url(/static/image/app/gameBg.png);
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		text-align: center;
		font-family: hzgb;
	}

	.search-flex {
		width: 94%;
		margin: 20px 3%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search-area {
		// width: 70vw;
		flex: 1;
		display: flex;
		border: none;
		flex-direction: row;
		align-items: center;
		height: 32px;
		background: #fff8e1;
		border-radius: 32px;
		box-sizing: border-box;
		padding-left: 8px;
		padding-right: 2px;
	}

	.search-icon {
		width: 24px;
		height: 24px;
	}

	.search-input {
		border: none;
		flex: 1;
	}

	.search-btn {
		width: 60px;
		height: 28px;
		border-radius: 28px;
		background: linear-gradient(-45deg, #373632 0%, #130E00 100%);
		color: #fff;
		font-weight: bold;
		border: none;
		text-align: center;
		line-height: 28px;
		font-size: 14px;
	}

	.room-back {
		width: 98%;
		margin-left: 1%;
		display: flex;
		flex-wrap: wrap;
	}

	.room-item-box {
		width: 49%;
		margin-right: 1%;
		// height: 100px;
		// display: inline-block;
	}

	.room-item-box:last-child {
		margin-right: 0;
	}

	.room-item {
		width: 100%;
		height: 100%;
		color: #fff;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 10px;
		padding: 12px;
		box-sizing: border-box;
		font-family: normal;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;

		.room-title {
			font-size: 16px;
			color: white;
			min-height: 70px;
			line-height: 18px;
			text-align: left;
			font-weight: 800;
		}

		.bottom-view {
			width: 100%;
			margin-top: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.state-img {
				width: 20px;
				height: 20px;
			}

			.right-view {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;

				.right-date {
					font-size: 14px;
					margin-left: 5px;
					text-align: left;
					color: white;
				}
			}
		}
	}
</style>